// import { reactive, readonly, ref, computed } from "vue";
// const state = reactive({
//   firstName: "Xu Ming",
//   lastName: "Deng",
// });
// const fullName = computed(() => {
//   console.log("changed");
//   return `${state.lastName}, ${state.firstName}`;
// });
// console.log("state ready");
// console.log("fullname is", fullName.value);
// console.log("fullname is", fullName.value);
// const imState = readonly(state);
// console.log(imState === state);
// const stateRef = ref(state);
// console.log(stateRef.value === state);
// state.firstName = "Cheng";
// state.lastName = "Ji";
// console.log(imState.firstName, imState.lastName);
// console.log("fullname is", fullName.value);
// console.log("fullname is", fullName.value);
// const imState2 = readonly(stateRef);
// console.log(imState2.value === stateRef.value);

// import { reactive, readonly } from "vue";
// function useUser() {
//   // 在这里补全函数
//   const userOrigin = reactive({});
//   const user = readonly(userOrigin);
//   const setUserName = (name) => {
//     userOrigin.name = name;
//   };
//   const setUserAge = (age) => {
//     userOrigin.name = age;
//   };
//   return {
//     user, // 这是一个只读的用户对象，响应式数据，默认为一个空对象
//     setUserName, // 这是一个函数，传入用户姓名，用于修改用户的名称
//     setUserAge, // 这是一个函数，传入用户年龄，用户修改用户的年龄
//   };
// }

import { reactive, readonly } from "vue";
function useDebounce(obj, duration) {
  // 在这里补全函数
  const valueOrigin = reactive(obj);
  const value = readonly(valueOrigin);
  const timer = null;
  const setValue = (newValue) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      Object.entries(newValue).forEach(([k, v]) => {
        valueOrigin[k] = v;
      });
    }, duration);
  };
  return {
    value, // 这里是一个只读对象，响应式数据，默认值为参数值
    setValue, // 这里是一个函数，传入一个新的对象，需要把新对象中的属性混合到原始对象中，混合操作需要在duration的时间中防抖
  };
}
